<script setup>
import {FwbDropdown, FwbInput, FwbListGroup, FwbListGroupItem, FwbModal, FwbRadio} from "flowbite-vue";
import {ref, reactive, watch} from "vue";
import SvgIcon from "@/components/SvgIcon.vue";
const props = defineProps({
  roleTitle: '', // 角色标题
  role: '', // 当前角色
})
const schedule = ref(1) // 修改进度
const isShowModal = ref(false)
const closeModal = () => {
  isShowModal.value = false
}
const showModal = () => {
  isShowModal.value = true
}
const params = reactive({
  uesrRole: "",
  userType: "SuperUser",
  liveView: '%',
})
const userTypeList = ref([
  {id: 1, name: 'SuperUser', desc: 'Users can view the user roles and accounts of all Superusers, Administrators, Users, and Operators.'},
  {id: 2, name: 'Administrator', desc: 'Users can view the user roles and accounts of all Users, and Operators.'},
  {id: 3, name: 'User', desc: 'Users can view the user roles and accounts of all Operators.'},
  {id: 4, name: 'Operator', desc: 'Users can only view their accounts. '},
])
const liveViewOptions = ref([
  {value: '1', name: '%'},
  {value: '2', name: 'View Only'},
])
const modalData = ref([
  {id: 1, name: 'Live view', detail: [
      {value: 'LIVE VIEW', desc: 'Ability to see or edit the LIVE View module', dropdown: true, checked: false},
      {value: 'See Camera stream image', desc: 'If users are not granted this permission, they will not be able to see any live camera feeds', dropdown: false, checked: true},
      {value: 'Take Snapshot from LIVE View', desc: '', dropdown: false, checked: true},
      {value: 'Ability to toggle on Live 3D feature', desc: '', dropdown: false, checked: true},
    ]
  },{
    id: 2, name: 'Camera', detail: [
      {value: 'Camera Module', desc: 'Ability to see or edit the Camera module', dropdown: true, checked: false},
      {value: 'Ability to see Camera Info', desc: 'If users are not granted this permission, they would not be able to see any information about cameras', dropdown: false, checked: true},
    ]
  },{
    id: 3, name: 'PTZ', detail: [
      {value: 'Ability to use PTZ Cameras', desc: '', dropdown: false, checked: true},
      {value: 'Add, edit, and delete PTZ presets and patrolling profiles on PTZ cameras', desc: '', dropdown: false, checked: true},
    ]
  },{
    id: 4, name: 'Recording', detail: [
      {value: 'Take manual recording in LIVEView', desc: '', dropdown: false, checked: true},
      {value: 'Stop manual recording in LIVEView', desc: '', dropdown: false, checked: true},
      {value: 'Recording Schedule', desc: 'Ability to see or edit the Recording Schedule in the Camera module', dropdown: true, checked: false},
    ]
  },{
    id: 5, name: 'Playback', detail: [
      {value: 'View Playback', desc: 'Ability to view the Playback module', dropdown: false, checked: true},
      {value: 'Video Recordings', desc: '', dropdown: true, checked: false},
      {value: 'Export Recordings', desc: '', dropdown: false, checked: true},
      {value: 'Snapshots', desc: '', dropdown: true, checked: false},
      {value: 'Export Snapshot', desc: '', dropdown: false, checked: true},
    ]
  },{
    id: 6, name: 'Activity Log', detail: [
      {value: 'View Activity Log', desc: 'If users are not granted this permission, they will not be able to see the Activity Log module', dropdown: false, checked: true},
      {value: 'Export Activity Log entries', desc: '', dropdown: false, checked: true},
    ]
  },{
    id: 7, name: 'User Management', detail: [
      {value: 'Manage User Roles and User Accounts', desc: 'If users are not granted this permission, they will not have access to the User Management module', dropdown: false, checked: true},
    ]
  },{
    id: 8, name: 'User Roles', detail: [
      {value: 'Create and remove User Roles', desc: '', dropdown: false, checked: true},
      {value: 'Edit User Roles', desc: 'Change User Role, User Hierarchy, and User Permissions', dropdown: false, checked: true},
      {value: 'Assign User Roles to User Accounts', desc: '', dropdown: false, checked: true},
    ]
  },{
    id: 9, name: 'User Accounts', detail: [
      {value: 'Create and remove User Accounts', desc: '', dropdown: false, checked: true},
      {value: 'Edit User Accounts', desc: 'User will be able to edit user accounts of accounts below their hierarchy', dropdown: false, checked: true},
      {value: 'Edit their own password', desc: '', dropdown: false, checked: true},
    ]
  },{
    id: 10, name: 'System Settings', detail: [
      {value: 'Edit Storage Settings', desc: 'User can edit details about hard disk storage, maximum storage limits, and time periods to store recorded items. ', dropdown: false, checked: true},
      {value: 'Edit Alert Settings', desc: '', dropdown: false, checked: true},
    ]
  }
])
const clickTextUrl = text => {
  params.liveView = text
}
const uesrRoleError = ref(false)
watch(() => params.uesrRole, newVal => {
  if(newVal.trim().length === 0){
    uesrRoleError.value = true
    return false
  }
  uesrRoleError.value = false
})
defineExpose({
  showModal,
})
</script>

<template>
  <fwb-modal v-if="isShowModal" @close="closeModal" size="md" id="CreateModal">
    <template #header>
      <div v-if="schedule === 1" class="text-lg flex flex-col text-sm text-[#9CA3AF] font-[500] font-Medium">
        <div class="">
          <p class="text-md">{{ roleTitle }} User Role</p>
        </div>
        <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[111px] left-0 hidden s4k:block s4k:top-[79px]"></div>
      </div>
      <div v-else>
        <svg-icon @click="schedule = 1" name="back" width="12px" height="9px" class="text-[var(--grid)] cursor-pointer "></svg-icon>
        <span class="text-md text-[var(--theme-font-desc-color)] ml-[12px]">Delete User Role</span>
      </div>
    </template>

    <template #body>
      <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[50px] left-0 s4k:hidden s2k:top-[60px]"></div>
      <div v-if="schedule === 1" class="list w-full mb-[47px] s2k:mb-0 h-[706px]">
        <p class="text-[20px] mt-[32px] font-[600] font-Inter text-[var(--theme-font-color)] s2k:mt-[16px]">{{ roleTitle }} User Role</p>
        <p class="text-sm text-[var(--theme-font-color)] mt-[24px] mb-[2px]">User Role*</p>
        <input type="text" id="input" v-model="params.uesrRole" :style="{border: uesrRoleError ? 'solid #FF8A4C 1px': ''}">
        <p v-show="uesrRoleError" class="text-sm text-[#FF8A4C] mt-[3px]">Please name this User Role</p>
        <div class="mt-[24px] text-[var(--theme-font-desc-color)] text-md">User Type</div>
        <div class="w-full mt-[20px]">
          <div id="radio2" class="w-full flex flex-row justify-start items-start mt-[10px]" v-for="v in userTypeList" :key="v.id">
            <fwb-radio v-model="params.userType" name="radio2" :value="v.name"/>
            <div class="w-full flex flex-col justify-start items-start">
              <p class="text-md text-[var(--theme-font-color)]">{{ v.name }}</p>
              <p class="text-sm text-[var(--theme-font-desc-color)]">{{v.desc}}</p>
            </div>
          </div>
        </div>
        <div v-for="item in modalData" :key="item.id">
          <div class="w-full h-[1px] bg-[var(--grid)] my-[24px]"></div>
          <div class="text-[var(--theme-font-desc-color)] text-md">{{ item.name }}</div>
          <div class="w-full mt-[32px] flex flex-row items-center" v-for="v in item.detail" :key="v.value">
            <div class="flex flex-col justify-center items-start">
              <span class="w-[512px] leading-[20px] text-[16px] text-[var(--theme-font-color)]">{{ v.value }}</span>
              <span v-if="v.desc" class="w-[512px] leading-[20px] text-md text-[var(--theme-font-desc-color)] mt-[5px]">{{v.desc}}</span>
            </div>
            <div v-if="v.dropdown" class="text-white ml-auto">
              <fwb-dropdown :text="params.liveView" id="dropdown">
                <fwb-list-group id="group">
                  <fwb-list-group-item hover v-for="v in liveViewOptions" :key="v.value" @click="clickTextUrl(v.name)">{{v.name}}</fwb-list-group-item>
                </fwb-list-group>
              </fwb-dropdown>
            </div>
            <input v-if="v.checked" type="checkbox" class="ml-auto text-[16px] w-[16px] h-[16px] rounded bg-[var(--grid)] cursor-pointer s4k:rounded-[4px]">
          </div>
        </div>
        <div class="mt-[40px]"></div>
      </div>
      <div v-else class="w-full h-[145px] s2k:h-[110px]">
        <p class="text-[20px] mt-[32px] font-[600] font-Inter text-[var(--theme-font-color)] s2k:mt-[16px]">Confirm Delete User Role?</p>
        <p class="text-md text-[var(--theme-font-desc-color)] mt-[24px]">Are you sure you wish to delete the User Role Manager?</p>
      </div>
    </template>
    <template #footer>
      <div v-if="schedule === 1" class="absolute bottom-0 left-0 w-full h-[81px] border-t border-solid border-[var(--grid)] z-[999] flex flex-row items-center">
        <div class="flex flex-row justify-start">
          <div class="w-[160px] h-[41px] font-[500] text-white font-Medium text-md bg-[#1C64F2] rounded-lg flex ml-[20px] cursor-pointer s4k:rounded-[8px]">
            <span class="m-auto">Add User Role</span></div>
          <div class="w-[88px] h-[41px] font-[500] text-white font-Medium text-md bg-[var(--grid)] rounded-lg flex ml-[8px] cursor-pointer  s4k:rounded-[8px]" @click="closeModal">
            <span class="m-auto">Cancel</span></div>
        </div>
        <div class="ml-auto w-[100px] h-[41px] font-[500] text-white font-Medium text-md bg-[#E02424] rounded-lg mr-[20px] cursor-pointer flex flex-row justify-center items-center s4k:rounded-[8px]" v-show="roleTitle === 'Edit' && role !== 'Admin'" @click="schedule = 2">
          <svg-icon name="dele" class="svgLogo cursor-pointer s2ksvg s4ksvg" width="14px" height="14px"></svg-icon>
          <span class="ml-[6px]">Delete</span>
        </div>
      </div>
      <div v-else class="absolute bottom-0 left-0 w-full h-[81px] border-t border-solid border-[var(--grid)] z-[999] flex flex-row items-center">
        <div class="w-[160px] h-[41px] font-[500] text-white font-Medium text-md bg-[#E02424] rounded-lg flex ml-[20px] cursor-pointer s4k:rounded-[8px]">
          <span class="m-auto">Confirm Delete</span></div>
        <div @click="schedule = 1" class="w-[160px] h-[41px] font-[500] text-white font-Medium text-md bg-[var(--theme-button-bg)] rounded-lg flex ml-[8px] cursor-pointer s4k:rounded-[8px]">
          <span class="m-auto">Do not Delete</span></div>
      </div>
    </template>
  </fwb-modal>
</template>

<style scoped lang="scss">
#CreateModal {
  :deep(.max-w-md) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    max-width: 720px;
    height: auto;

    button {
      cursor: pointer;

      &:hover {
        background: var(--theme);
      }

      svg {
        color: #6B7280;
      }
    }

    .bg-white {
      width: 100%;
      height: 100%;
      background-color: var(--theme);
    }
    .p-4 {
      padding-left: 1.4rem;
      padding-right: 1.4rem;
    }
    .p-6 {
      padding: 1.4rem;
      padding-top: 0;
      .list {
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-right: 16px;
      }

      .list::-webkit-scrollbar {
        width: 4px;
      }

      .list::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb);
        border-radius: 10px;
      }

      .list::-webkit-scrollbar-track {
        background-color: var(--scrollbar-track);
        border-radius: 10px;
      }
    }
  }
}
#radio2 {
  :deep(label) {
    width: 25px;
    input {
      width: 16px;
      height: 16px;
      border: solid 1px var(--grid);
      background-color: var(--inputBg);
      cursor: pointer;

      &:checked {
        border: solid 4px #1C64F2;
        // background-color: #1C64F2;
        // border-color: #1C64F2;
      }

      &:focus {
        box-shadow: inset 0 0;
      }
    }

    .text-sm {
      font-size: 16px;
      font-family: Medium;
    }
  }
}
#input {
  width: 676px;
  height: 37px;
  padding: 0;
  padding-left: 10px;
  font-size: 14px;
  color: #9CA3AF;
  background: var(--theme);
  border: solid 1px var(--grid);
  border-radius: 8px;
  margin-top: 6px;
  &:focus {
    outline: none;
    box-shadow: inset 0 0;
  }
}
#dropdown{
  :deep(button){
    background: var(--theme);
    border: solid var(--grid) 1px;
    box-shadow: none;
    color: var(--theme-font-color);
    background-color: var(--theme) !important;
    box-sizing: border-box;
    cursor: pointer;
    width: 120px;
    height: 45px;
    border-radius: 8px;
    font-size: 14px;
    padding: 0 0 0 10px;
    margin-top: 3px;
    position: relative;
    svg{
      position: absolute;
      right: 5%;
      top: 50%;
      transform: translateY(-50%);
      width: 15px;
      height: 15px;
      color: var(--svg);
    }
  }
  #group{
    width: 120px;
    height: 65px;
    color: var(--theme-font-color);
    border-radius: 0px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    li{
      height: 20px;
      padding-left: 15px;
      padding-right: 0;
      cursor: pointer;
      font-size: 14px !important;
      border-bottom: solid var(--grid) 1px;
      &:hover{
        color: var(--theme-font-color-hover);
        background-color: var(--grid);
      }
    }
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(1.5);
      //height: 855px;
      .p-4{
        padding: 0.8rem;
        padding-right: 0.4rem;
      }
      .p-6 {
        padding:  0.8rem;
        padding-right: 1.6rem;
        margin-bottom: 20px;
        .list {
          padding-right: 26px;
        }
      }
    }
  }
  #dropdown{
    position: relative;
    #group{
      position: absolute;
      top: -30px;
      li{
        height: 16px;
        padding-left: 15px;
        padding-right: 0;
        cursor: pointer;
        font-size: 1rem;
        border-bottom: solid var(--grid) 1px;
        &:hover{
          color: var(--theme-font-color-hover);
          background-color: var(--grid);
        }
      }
    }
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(2);
      //height: 880px;
      .p-4{
        padding: 0.6rem;
        padding-right: 0rem;
      }
      .p-6 {
        padding: 0.6rem 1rem;
        .list {
          padding-right: 25px;
        }
      }
    }
  }
  #dropdown{
    position: relative;
    #group{
      position: absolute;
      top: -52px;
      li{
        height: 8px;
        padding-left: 15px;
        padding-right: 0;
        cursor: pointer;
        font-size: 1rem;
        border-bottom: solid var(--grid) 1px;
        &:hover{
          color: var(--theme-font-color-hover);
          background-color: var(--grid);
        }
      }
    }
  }
}
</style>
